<template>
  <div style="margin-top: 50px">
    <el-card class="form-container" shadow="never">
    <el-steps :active="2" align-center>
      <el-step title="填写物品信息"></el-step>
      <el-step title="填写物品详实信息"></el-step>
      <el-step title="确认物品信息并提交"></el-step>
    </el-steps>
    <el-form label-width="120px" style="width: 720px;margin-top: 40px" size="small">

      <el-form-item label="闲置物品名称：">
        <el-card shadow="never" class="cardBg" style="height: 60px">
          <span style="height: 50px">{{goodsInfo.goodsName}}</span>
        </el-card>

      </el-form-item>

      <el-form-item label="上传物品相册：">
        <el-upload
          :action="BASE_API+'/service/oss/uploadPhotoFile'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="6"
          :on-success="handleSuccess"
          :file-list="file_list"
          :before-remove="beforeRemove"
           >
          <i v-if="file_list.length<6" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="上传闲置物品详情视频：">
        <el-upload
          class="upload-demo"
          drag
          :action="BASE_API+'/service/video/uploadVideo'"
          :limit="1"
          :file-list="videoFile"
          :on-success="uploadVideoSuccess"
          :before-remove="removeVideoBefore"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传MP4 /png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写物品信息</el-button>
        <el-button type="primary" size="medium" @click="handleNext">下一步，确认物品信息并提交</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
import {getGoodsInfo} from '../../../api/goods/goodsInfo'
import {getGoodsImageList} from '../../../api/goods/goodsImage'
import {getGoodsVideoById,deleteGoodsVideoById,addGoodsVideo} from '../../../api/goods/goodsVideo'
import {getUploadVideoInfo} from '../../../api/vod'

export default {

    data(){
        return{
          BASE_API: process.env.BASE_API,
          dialogImageUrl: '',
          dialogVisible: false,
          file_list:[],
          goodsImage:{
            imageId:'',
            goodsId:'',
            imageSource:''
          },
          goodsImageList:[],
          goodsVideo:{
            videoId:'',
            goodsId:'',
            videoTitle:'',
            videoSourceId:'',
            videoOriginalName:'',
            duration:null,
            status:null,
            size:null
          },
          goodsInfo:{},
          videoFile:[]


        }
    },
  created(){
       this.getInfo();
  },
    methods:{
        //初始化信息
        getInfo(){
          this.goodsImage.goodsId=this.$route.params.id;
          this.goodsVideo.goodsId=this.$route.params.id;
          getGoodsInfo(this.$route.params.id).then(res=>{
            this.goodsInfo=res.data.goods;
          });
          getGoodsImageList(this.$route.params.id).then(res=>{
            this.goodsImageList=res.data.goodsImageList;
          });
          getGoodsVideoById(this.$route.params.id).then(res=>{
            this.goodsVideo=res.data.goodsVideo;
          });

        },
      //上一步
        handlePrev() {

            //this.$emit('prevStep')
        },
      //下一步
        handleNext() {

            //this.$emit('nextStep')
        },
      //删除图片之后调用
      handleRemove(file, fileList) {
         console.log(file.name);
         console.log(file.url);
         console.log("删除之后的文件数量："+this.goodsImageList.length);

      },
      //鼠标在已上传图片时调用
      handlePictureCardPreview(file) {

        this.dialogImageUrl = file.url;

        this.dialogVisible = true;
      },
      //上传图片成功之后调用
      handleSuccess(res,file){
        if (res.success) {

          this.goodsImage.goodsId=this.goodsInfo.goodsId;
          this.goodsImage.imageSource = res.data.url
          file.url=res.data.url;
          console.log(this.goodsImage.imageSource==file.url);
          this.goodsImageList.push(this.goodsImage);

          console.log("添加的图片对象："+this.goodsImage);

          // 强制重新渲染
          this.$forceUpdate()
        } else {
          this.$message.error('上传失败(业务失败)')
        }
      },
      //删除图片之前调用
      beforeRemove(file, fileList){
        // return this.$confirm(`确定移除 ${ file.name } 和 ${file.url}？`);
         this.$confirm(`确定移除 ${ file.name } 和 ${file.url}？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i=0;i<this.goodsImageList.length;i++){
            if (this.goodsImageList[i].imageSource==file.url){
                this.goodsImageList.splice(i,1);
                console.log("删除成功！！");
            }

          }
          //console.log("删除之后："+this.goodsImageList);

        })
      },
      //视频上传成功之后调用
      uploadVideoSuccess(res,file){
          if (res.success){
            this.goodsVideo.videoSourceId=res.data.videoId;
            this.goodsVideo.videoOriginalName=file.name;

            console.log("视频id"+this.goodsVideo.videoSourceId);
            //获取已经上传的视频信息
            getUploadVideoInfo(this.goodsVideo.videoSourceId).then(res=>{
              console.log(res.data.title + '/' + res.data.duration + '/' + res.data.videoSize + '/' + res.data.status);
              this.goodsVideo.videoTitle=res.data.title;
              this.goodsVideo.duration=res.data.duration;
              this.goodsVideo.size=res.data.videoSize;
              this.goodsVideo.status=res.data.status;

            });
            //添加物品视频记录
            addGoodsVideo(this.goodsVideo).then(res=>{

            })
            //提示
            this.$message({
              type: 'success',
              message: '上传物品详情视频成功!'
            });
          }else {
            //提示
            this.$message({
              type: 'warning',
              message: '上传物品详情视频失败!'
            });
          }

      },
      //删除已上传的视频之前调用
      removeVideoBefore(file){
        this.$confirm(`确定移除 ${ file.name } ？`, '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{

        })
      },
      addAlbumAndVideo(){

      },
      updateAlbumAndVideo(){

      }
    }
}
</script>

<style scoped>
  .littleMarginLeft {
    margin-left: 10px;
  }

  .littleMarginTop {
    margin-top: 10px;
  }

  .paramInput {
    width: 250px;
  }

  .paramInputLabel {
    display: inline-block;
    width: 100px;
    text-align: right;
    padding-right: 10px
  }

  .cardBg {
    background: #F8F9FC;
  }
  .form-container {
    width: 1000px;
    margin-left: 200px;
  }
</style>
